<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托是什么？</title>
</head>

<body>
    <h1>事件委托是什么？</h1>
    <p>事件委托（Event Delegation）是一种优化和改进事件处理的技术，在 JavaScript 中被广泛应用。它通过将事件处理程序绑定到其父元素上，以代理或委托处理子元素上发生的事件；</p>
    <p>通常，我们在处理事件时会将事件处理程序直接附加到特定的元素上；</p>
    <p>使用事件委托，我们可以将事件处理程序附加到按钮的父元素上，以便统一处理子元素的事件；</p>
    <p>原理就是利用事件冒泡的机制来实现，也就也是把子元素的事件绑定到父元素身上，如果子元素组织了冒泡，事件委托也就不存在；event.stopPropagation()</p>

    <ul>
        <li><b>事件委托的好处有：</b></li>
        <li>减少了事件处理程序的数量，节省了内存资源。</li>
        <li>可以动态地处理新增、删除或替换的子元素上的事件，无需重新绑定事件处理程序。</li>
        <li>可以将事件处理程序应用于一组具有相似行为的元素，提供了更灵活的事件处理方式。</li>
        <li>通过使用事件委托，我们可以更高效地管理和处理复杂的事件交互。</li>
    </ul>

    <button id="myButton">点击</button>

    <ul class="list">
        <li><button class="btn1">btn 1</button></li>
        <li><button class="btn2">btn 2</button></li>
        <li><button class="btn3">btn 3</button></li>
        <li><button class="btn4">btn 4</button></li>
    </ul>

    <script>
        var button = document.getElementById('myButton');
        button.addEventListener('click', function (e) {
            // 处理点击事件
            console.log(e);
        });

        var parent = document.querySelector('.list');
        parent.addEventListener('click', function (e) {
            var target = e.target;
            if (target.matches('.btn4')) {
                // 查看事件内容
                console.dir(target)
            }
        });
    </script>
</body>

</html>